<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#box{
				margin: 100px auto;
				border: 1px solid #000000;
				width: 600px;
				height: 350px;
			}
		#text{
			margin-top: 20px;
			width:75%;
			height:180px;
			
		}
		#ul{
			margin: ;
		}
		#ul li{
			border-bottom: 1px solid skyblue;
		}
		#ul li a{
			float: right;
		}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="top">
				<label>发表评论</label>
			<textarea id="text"></textarea>
			<button id="btn">发表</button></div>
			<div id="bottom">
				<ul id="ul">
					
				</ul>
			</div>
		</div>
	<script>
		window.onload = function(){
			var btn = document.getElementById("btn");
			var text = document.getElementById("text");
			var ul = document.getElementById("ul");
		
		btn.onclick = function () {
			//
			var page = text.value;
			console.log(page);
			
			
			if(page.length === 0){
				alert("请输入评论");
				return;
			}
			//发表评论
				var li = document.createElement("li");
				li.innerHTML = page + '<a href="#">删除</a>';
				ul.insertBefore(li, ul.children[0]);
				
				
				text.value = "";
				
			//删除行为
			var alist = ul.getElementsByTagName("a");
			//指定寻找
			for(var i =0; i<alist.length; i++){
				alist[i].onclick = function(){
					this.parentNode.remove();}
					}
		};			
			}
	</script>
	</body>
</html>
